import Taro from '@tarojs/taro'
import {View,Text,Image,Picker,Input, Label, Textarea} from '@tarojs/components'
import { AtForm,AtButton,AtIcon} from 'taro-ui'
import{useState,useEffect,useRef,useContext,createContext} from 'react'
import { userDetailInfo,updateResume,updateUserPhotoBase64,getSkillCertificate ,getHonorCertificate,updateHonorCertificate,updateSkillCertificate,getAllPositionArea,getAllPositionPositionType,putAllSkillCertificate,putAllHonorCertificate} from '../../../api/mode'
import { ExpectPosition,WorkExp,EduBack,SkillCertificate,HonorCertificate, HonorCertificatePost,SkillCertificatePost } from '../../../components'
import addImg from '../../../images/add.png'
import './index.scss'


export default function EditorMyResume(){
  // const Qs=require('qs')

  const positionText=createContext()
  const workExpText=createContext()
  const EduBackText=createContext()
  const skillText=createContext()
  const honorText=createContext()
  const openid=Taro.getStorageSync(`openid`)
  const[userInfo,setUserInfo]=useState({})
  const[photofiles,setPhotofiles]=useState('')
  const [expectPosition,setExpectedPosition]=useState([])//期望职位
  const [workExp,setWorkExp]=useState([])//工作经历
  const [eduBack,setEduBack]=useState([])//教育背景
  const [skillCertificate,setSkillCertificate]=useState([])//技能证书
  const [honorCertificate,setHonorCertificate]=useState([])//荣誉证书
  const [newHonorCertificate,setNewHonorCertificate]=useState([])//新的荣誉证书
  const [newSkillCertificate,setNewSkillCertificate]=useState([])//新的技能证书
  const [areaSelector,setAreaSelector]= useState([])
  const [positionTypeSelector,setPositionTypeSelector]= useState([])
  const [isPhoto,setIsPhoto]= useState(false)//照片是否存在
  const [idCardErrorMessage,setIdCardErrorMessage]=useState('')
  // const changeExpectedPosition=useRef()
  const sexRange=['男','女']
  const eduRange=['小学','初中','高中','专科','本科','研究生']
  const politicsRange=['群众','共青团员','中共党员(含预备)','其他']
  const armTypeRange=['义务兵','士官','军官','军属','暂无']
  const expRange=['即将退役','退役']

//初始化数据
  useEffect(()=>{
    userDetailInfo(openid).then(res=>{
      console.log(res.data.data);
      setUserInfo(res.data.data)
      setPhotofiles(res.data.data.photo)
      setExpectedPosition(res.data.data.expectedPosition)
      setWorkExp(res.data.data.workExp)
      setEduBack(res.data.data.eduBack)
      res.data.data.photo?setIsPhoto(true):null
    })

    getSkillCertificate(openid).then(res=>{//获取技能证书
      // console.log(res.data.data);
      setSkillCertificate(res.data.data)
    })

    getHonorCertificate(openid).then(res=>{//获取荣誉证书
      // console.log(res.data.data);
      setHonorCertificate(res.data.data)
    })
  }
  ,[])


  //当头像发生变化时，上传更新
  useEffect(()=>{
    const photo={
      openid:openid,
      photo:'data:image/png;base64,'+photofiles
    }
    // console.log(photo);
    // console.log(Qs.stringify(photo));
    if(photofiles) updateUserPhotoBase64(photo)
    .then(resp=>{
      console.log(resp,'photo update')
      setIsPhoto(true)
    })
  },[photofiles])

  //初始获得职位和地区的下拉列表
  useEffect(()=>{
    getAllPositionArea().then(res=>{setAreaSelector(res.data.data);})
    getAllPositionPositionType().then(res=>{setPositionTypeSelector(res.data.data)})
  },[])

    //子组件修改父数据(期望职位)
const handleExpectChange=(index)=>(infos)=>{
  setExpectedPosition(pre=>[
    ...pre.slice(0,index),
    {...pre[index],...infos},
    ...pre.slice(index+1)
  ])
}

  //子组件修改父数据(工作经历)
const handleWorkChange=(index)=>(infos)=>{
  setWorkExp(pre=>[
    ...pre.slice(0,index),
    {...pre[index],...infos},
    ...pre.slice(index+1)
  ])
}

//子组件修改父数据(教育背景)
const handleEduChange=(index)=>(infos)=>{
  setEduBack(pre=>[
    ...pre.slice(0,index),
    {...pre[index],...infos},
    ...pre.slice(index+1)
  ])
}

//子组件修改父数据(技能证书)
const handleSkillChange=(index)=>(infos)=>{

  const photo={
    openid:openid,
    certificateId:infos.id,
    certificateName:infos.name,
    file:'data:image/png;base64,'+infos.photo
  }
  console.log(photo);
  updateSkillCertificate(photo).then(resp=>{console.log(resp);})


  setSkillCertificate(pre=>[
    ...pre.slice(0,index),
    {...pre[index],...infos},
    ...pre.slice(index+1)
  ])
}

//子组件修改父数据同时修改上传新的更改(荣誉证书)
const handleHonorChange=(index)=>(infos)=>{

  console.log(infos);
  const photo={
    openid:openid,
    certificateId:infos.id,
    certificateName:infos.name,
    file:'data:image/png;base64,'+infos.photo
  }
  console.log(photo);
  updateHonorCertificate(photo).then(resp=>{console.log(resp);})

  setHonorCertificate(pre=>[
    ...pre.slice(0,index),
    {...pre[index],...infos},
    ...pre.slice(index+1)
  ])
}

//子组件修改父数据同时修改上传新的更改(新增的荣誉证书)
const handleNewHonorChange=(index)=>(infos)=>{

  setNewHonorCertificate(pre=>[
    ...pre.slice(0,index),
    {...pre[index],...infos},
    ...pre.slice(index+1)
  ])
}
//子组件修改父数据同时修改上传新的更改(新增的荣誉证书)
const handleNewSkillChange=(index)=>(infos)=>{

  setNewSkillCertificate(pre=>[
    ...pre.slice(0,index),
    {...pre[index],...infos},
    ...pre.slice(index+1)
  ])
}



  //上传事件
  const onSubmit=()=>{
    if(!isPhoto){
      Taro.showToast({
        title:'请上传照片',
        icon:'error',
        duration:1000
      })
    }else if(!userInfo.name){
      Taro.showToast({
        title:'请填写姓名',
        icon:'error',
        duration:1000
      })
    }else if(!userInfo.phone){
      Taro.showToast({
        title:'请填写手机号码',
        icon:'error',
        duration:1000
      })
    }else if(!userInfo.idNumber){
      Taro.showToast({
        title:'请填写身份证号',
        icon:'error',
        duration:1000
      })
    }else if(!userInfo.eduDegree){
      Taro.showToast({
        title:'请填写学历',
        icon:'error',
        duration:1000
      })
    }else if(!userInfo.birthday){
      Taro.showToast({
        title:'请填写出生日期',
        icon:'error',
        duration:1000
      })
    }else if(!userInfo.sex){
      Taro.showToast({
        title:'请填写性别',
        icon:'error',
        duration:1000
      })
    }else if(idCardErrorMessage!==''){
      Taro.showToast({
        title:'身份证格式错误',
        icon:'error',
        duration:1000
      })
    }
    else if(isPhoto&&userInfo.name&&userInfo.phone&&userInfo.idNumber&&userInfo.eduDegree&&userInfo.birthday&&userInfo.sex){
      updateResume(
        {
         ...userInfo,
         openid:Taro.getStorageSync('openid'),
         expectedPosition:expectPosition,
         workExp:workExp,
         eduBack:eduBack,
         sex:userInfo.sex==='男'?false:true  //性别进行数据转换
        }
      ).then( res=>{console.log('简历上传成功',res);})
        //判断是否为空，以便展开
    let tmpSkillArr=[];
    if(skillCertificate){
      if(newSkillCertificate){
        tmpSkillArr= [
            ...skillCertificate,
            ...newSkillCertificate
           ]
      }
      else{
        tmpSkillArr=[
          ...skillCertificate,
        ]
      }
    }
    else{
      if(newSkillCertificate){
        tmpSkillArr=[
          ...newSkillCertificate
        ]
      }
    }
     
     let SkillArr= tmpSkillArr.map((item)=>{
      return{
        id:item.id,
        certificateName:item.name,
        base64File:'data:image/png;base64,'+item.photo,
    }
      // console.log(item,index);
    })
    // console.log(SkillArr);
    const allSkillCertificate={
      openid:openid,
      certificatesJson:
      JSON.stringify(
        SkillArr
      ) 
    }
    // console.log(allSkillCertificate);
    putAllSkillCertificate(allSkillCertificate).then(res=>{console.log('职业技能证书上传成功',res);})



//判断是否为空，以便展开
    let tmpHonorArr=[];
    if(honorCertificate){
      if(newHonorCertificate){
        tmpHonorArr= [
            ...honorCertificate,
            ...newHonorCertificate
           ]
      }
      else{
        tmpHonorArr=[
          ...honorCertificate,
        ]
      }
    }
    else{
      if(newHonorCertificate){
        tmpHonorArr=[
          ...newHonorCertificate
        ]
      }
    }
 
    let honorArr= tmpHonorArr.map((item)=>{
      return{
        id:item.id,
        certificateName:item.name,
        base64File:'data:image/png;base64,'+item.photo,
    }
      // console.log(item,index);
    })
    const allHonorCertificate={
      openid:openid,
      certificatesJson:
      JSON.stringify(honorArr)
    }
     putAllHonorCertificate(allHonorCertificate).then(res=>{console.log('荣誉证书上传成功',res);})

     Taro.showToast({
       title:'修改简历成功',
       icon:'success',
       duration:1000
     })

    let timer= setInterval(()=>{
       Taro.reLaunch({
         url:'../myResume/myResume'
       })
       clearInterval(timer)
     },1000)
    }

     


  }

//输入框输入事件
  const handleChange=(prev,item,value)=>{
    { console.log(value.detail.value);
      setUserInfo(() => ({
        ...prev,
        [item]:value.detail.value
        }))
        console.log(userInfo);
  }
  }

//身份证输入事件
const idCardInput=(e)=>{
  let idvalue=e.detail.value
  console.log(idvalue)
  // 身份证号前两位代表区域
  const city = {
    11: '北京',
    12: '天津',
    13: '河北',
    14: '山西',
    15: '内蒙古',
    21: '辽宁',
    22: '吉林',
    23: '黑龙江 ',
    31: '上海',
    32: '江苏',
    33: '浙江',
    34: '安徽',
    35: '福建',
    36: '江西',
    37: '山东',
    41: '河南',
    42: '湖北 ',
    43: '湖南',
    44: '广东',
    45: '广西',
    46: '海南',
    50: '重庆',
    51: '四川',
    52: '贵州',
    53: '云南',
    54: '西藏 ',
    61: '陕西',
    62: '甘肃',
    63: '青海',
    64: '宁夏',
    65: '新疆',
    71: '台湾',
    81: '香港',
    82: '澳门',
    91: '国外 ',
  };
  const idCardReg = /^[1-9]\d{5}(19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i; // 身份证格式正则表达式
  let errorMessage = ''; // 错误提示信息
  let isPass = true; // 身份证验证是否通过（true通过、false未通过）
  let value=idvalue
  // 如果身份证不满足格式正则表达式
  if (!value) {
    setIdCardErrorMessage('请输入身份证号码')
    handleChange(userInfo,'idNumber',e)
    errorMessage = '请输入身份证号码';
    isPass = false;
  } else if (!value.match(idCardReg)) {
    setIdCardErrorMessage('请输入正确的身份证号码')
    handleChange(userInfo,'idNumber',e)
    errorMessage = '请输入正确的身份证号码';
    isPass = false;
  } else if (!city[value.substr(0, 2)]) {
    // 区域数组中不包含需验证的身份证前两位
    setIdCardErrorMessage('请输入正确的身份证号码')
    handleChange(userInfo,'idNumber',e)
    errorMessage = '请输入正确的身份证号码';
    isPass = false;
  } else if (value.length === 18) {
    // 18位身份证需要验证最后一位校验位
    value = value.split('');
    // ∑(ai×Wi)(mod 11)
    // 加权因子
    const factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
    // 校验位
    const parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
    let sum = 0;
    let ai = 0;
    let wi = 0;
    for (let i = 0; i < 17; i++) {
      ai = parseInt(value[i]);
      wi = factor[i];
      sum += ai * wi; // 开始计算并相加
    }
    const last = parity[sum % 11]; // 求余
    if (last.toString() !== value[17]) {
      setIdCardErrorMessage('请输入正确的身份证号码')
      handleChange(userInfo,'idNumber',e)
      errorMessage = '请输入正确的身份证号码';
      isPass = false;
    }
  }
if(isPass&&value.length === 18){
  console.log("yes",idvalue)
  setIdCardErrorMessage('')
  var org_birthday = idvalue.substring(6, 14);
  var birthdayString = org_birthday.substring(0, 4) + "-" + org_birthday.substring(4, 6) + "-" + org_birthday.substring(6, 8);
  // console.log(birthdayString)


  //输入身份证格式成功时修改出生日期
  const idcardToBirthday=(prev,key1,key2,item1,item2)=>{
    { console.log(value);
      setUserInfo(() => ({
        ...prev,
        [key1]:item1,
        [key2]:item2
        }))
        console.log(userInfo);
  }
  }
  idcardToBirthday(userInfo,'birthday','idNumber',birthdayString,idvalue)

  
}else{
  console.log("no")
}





}
 
//选择框修改事件
  const handlePickerChange=(prev,item,range,value)=>{
    { console.log(value.detail.value);
      setUserInfo(() => ({
        　　...prev,
        　　[item]:range[value.detail.value]
        }))
        console.log(value.detail.value);
  }
  }

//选择框日期修改事件
  const handleDateChange=(prev,item,value)=>{
    { console.log(value.detail.value);
      setUserInfo(() => ({
        　　...prev,
        　　[item]:value.detail.value
        }))
        console.log(userInfo);
  }
  }

//照片base64转换并保存64编码
const  imgConvertBase64 = (fileSrc,setPhoto)=>{//第二个参数为保存数据
  return new Promise((resolve,reject)=>{
      if(Taro.getEnv()==='WEAPP'){
          console.log('微信小程序');
          Taro.getFileSystemManager().readFile({
              filePath: fileSrc, //选择图片返回的相对路径
              encoding: 'base64', //编码格式
              success: res => { //成功的回调
                  let base64 =  res.data;
                  console.log(base64);
                  setPhoto(base64);
              }
          });
      }
  });
};


//头像照片变换时事件
const photoChange=()=>{
  Taro.chooseImage({
    count: 1,// 默认9
    sizeType: ['original', 'compressed'],// 能够指定是原图仍是压缩图，默认两者都有
    sourceType: ['album', 'camera'],// 能够指定来源是相册仍是相机，默认两者都有
    success: function(res) {
        // console.log(res)
        // 返回选定照片的本地文件路径列表，tempFilePath能够做为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths;
        let changeFile = {};
        changeFile = tempFilePaths[0];
        // console.log(changeFile);
        imgConvertBase64(changeFile,setPhotofiles)   
        }
  })
}

//添加空白期望岗位
const addExpectPosition=()=>{

    setExpectedPosition([
      ...expectPosition,
      {
       area: '四川省',
       minSal:0,
       maxSal:0,
       type:'销售类'
      }
    ])
  
}

//添加空白工作经历
const addWorkExp=()=>{
  setWorkExp([
    ...workExp,
    {
     
    }
  ])
}

//添加空白教育背景
const addEduBack=()=>{
  setEduBack([
    ...eduBack,
    {
     
    }
  ])
}

//添加空白荣誉证书
const addHonor=()=>{
  setNewHonorCertificate([
    ...newHonorCertificate,
    {
      
    }
  ])
}

//添加空白技能证书
const addSkill=()=>{
  setNewSkillCertificate([
    ...newSkillCertificate,
    {

    }
  ])
}

//删除特定项
const deleteItem=(arr,target)=>{
  arr.map((Info,index)=>{
    if(index===target)
      {arr.splice(index,1)}
      setExpectedPosition(()=>{//深拷贝删除数据
        return [...arr]
      })
      console.log('success delete:'+index);
  })
}

//删除选中的期望职位
const deleteExpectPosition=(id)=>{
  deleteItem(expectPosition,id)
  // console.log(expectPosition);
}
//删除选中的工作经验
const deleteWorkExp=(id)=>{
  deleteItem(workExp,id)
}
//删除选中的教育背景
const deleteEduBack=(id)=>{
  deleteItem(eduBack,id)
}
//删除选中的荣誉证书
const deleteHonorCertificate=(id)=>{
  deleteItem(honorCertificate,id)
}
//删除选中的技能证书
const deleteSkillCertificate=(id)=>{
  deleteItem(skillCertificate,id)
}


  return(
    <View className='resume' >  
    <View >

    <Text className='intro'>个人信息</Text>

      <AtForm
        onSubmit={onSubmit.bind(this)}
      >


    <View className='at-row'>
      {/* 用户头像上传 */}
      {
      photofiles?
        <Image className='at-col at-col-7 myResumePhoto' src={'data:image/png;base64,'+photofiles} onClick={photoChange} /> 
        :
        <Image className='at-col at-col-7 myResumePhoto' src={addImg} onClick={photoChange} /> 
    }
              
        <View className='at-col at-col-5'>
{/* 姓名 */}
        <View className='at-row myResumeItem'>
        <Label className='at-col at-col-5 requireInput' >姓名:</Label>
        <Input 
          className='at-col at-col-7 contextborder' 
          name='name'
          type='text'
          value={userInfo.name}
          onInput={(value)=>{handleChange(userInfo,'name',value)}}
        />
        </View>
        
{/* 性别 */}
        <View className='myResumeItem at-row'>
          <View className='mySex at-col at-col-5 requireInput'>性别:</View>
        <Picker  className='Contextborder at-col at-col-7' mode='selector' range={sexRange} onChange={(value)=>{handlePickerChange(userInfo,'sex',sexRange,value)}}>
                <View className='picker'>
                 {userInfo.sex}
                </View>
              </Picker>
        </View>

{/*学历*/}
        <View className='myResumeItem at-row'>
        <View className='mySex at-col at-col-5 requireInput'>学历:</View>
        <Picker mode='selector'className='Contextborder at-col at-col-7' range={eduRange} onChange={(value)=>{handlePickerChange(userInfo,'eduDegree',eduRange,value)}}>
                <View className='picker'>
                      {userInfo.eduDegree}
                </View>
              </Picker>
        </View>

{/* 身高 */}
        <View className='at-row myResumeItem'>
        <Label className='at-col at-col-5 noRequireInput'>身高:</Label>

        <View className='contextborder PositionMark'>
        <Input 
          className='at-col at-col-7' 
          style={{display:`inline-block`}}
          name='height'
          type='text'
          value={userInfo.height}
          onInput={(value)=>{handleChange(userInfo,'height',value)}}
        />

        <View style={{color:`black`,width:20,display:`inline`,position:`absolute`}}>cm</View>
        </View>
        
        </View>

{/* 体重 */}
      <View className='at-row myResumeItem'>
        <Label className='at-col at-col-5 noRequireInput'>体重:</Label>
        
        <View className='contextborder PositionMark'>
        
        <Input 
          style={{display:`inline-block`}}
          className='at-col at-col-7 ' 
          name='weight'
          type='text'
          value={userInfo.weight}
          onInput={(value)=>{handleChange(userInfo,'weight',value)}}
        />

        <View style={{color:`black`,width:20,display:`inline`,position:`absolute`}}>kg</View>

        </View>

        </View>        
        </View> 
    </View>


{/* 政治面貌 */}
        <View className='at-row '>
          <Label className='at-col at-col-3 noRequireInput'>政治面貌:</Label>
        <Picker mode='selector' className='at-col at-col-9' range={politicsRange} onChange={(value)=>{handlePickerChange(userInfo,'politicsStatus',politicsRange,value)}}>
                <View className='picker'>
                  {userInfo.politicsStatus}
                </View>
              </Picker>
        </View>

{/* 电话 */}
      <View className='at-row'>
        <Label className='at-col at-col-3 requireInput'>联系电话:</Label>
        <Input 
          className='at-col at-col-9 contextborder' 
          name='phone'
          type='text'
          value={userInfo.phone}
          onInput={(value)=>{handleChange(userInfo,'phone',value)}}
        />
        </View>   

{/* 身份证号 */}
      <View className='at-row' style={{marginBottom:0}}>
        <Label className='at-col at-col-3 requireInput'>身份证号:</Label>
        <Input 
          className='at-col at-col-9 contextborder' 
          name='phone'
          type='text'
          value={userInfo.idNumber}
          onblur={(value)=>{idCardInput(value)}}
          style={idCardErrorMessage===''?null:{borderColor:'red'}}
        />
        </View> 
        <View className='idcard_errorMessage at-row'>
          {idCardErrorMessage}
          </View>


{/* 出生日期 */}
        <View className='at-row'>
        <Label className='at-col at-col-3 requireInput'>出生日期:</Label>

        <Picker mode='date' className='at-col at-col-6'  onChange={(value)=>{handleDateChange(userInfo,'birthday',value)}}>
                <View className='picker'>
                  {userInfo.birthday}
                </View>
              </Picker>
        </View>

 {/* 居住地 */}
      <View className='at-row'>
        <Label className='at-col at-col-3 noRequireInput'>居住地:</Label>
        <Input 
          className='at-col at-col-9 contextborder' 
          name='presentAddr'
          type='text'
          value={userInfo.presentAddr}
          onInput={(value)=>{handleChange(userInfo,'presentAddr',value)}}
        />
        </View>      

{/* 所属类型 */}
        <View className='at-row'>
          <View className='at-col at-col-3 noRequireInput'>所属类型:</View>
        <Picker mode='selector' className='at-col at-col-3' range={armTypeRange} onChange={(value)=>{handlePickerChange(userInfo,'type',armTypeRange,value)}}>
                <View className='picker'>
                 {userInfo.type}
                </View>
              </Picker>
        </View>


{/* 邮箱 */}
        <View className='at-row'>
        <Label className='at-col at-col-3 noRequireInput'>邮箱:</Label>
        <Input 
          className='at-col at-col-9 contextborder' 
          name='email'
          type='text'
          value={userInfo.email}
          onInput={(value)=>{handleChange(userInfo,'email',value)}}
        />
        </View> 
        

{/* 工作经验 */}
        <View className='at-row'>
          <View className='at-col at-col-3 noRequireInput'>工作经验:</View>
        <Picker mode='selector' className='at-col at-col-4' range={expRange} onChange={(value)=>{handlePickerChange(userInfo,'workTime',expRange,value)}}>
                <View className='picker'>
                  {userInfo.workTime}
                </View>
              </Picker>
        </View>


{/* 个人简介 */}
    <View className='ResumePart'>
    <Text className='intro'>个人简介</Text>
          <View >
          <Textarea className='myIntro' name='selfIntro' value={userInfo.selfIntro} onInput={(e)=>{handleChange(userInfo,'selfIntro',e)}}>
          </Textarea>
          </View>

    </View>
{/* 期望职位 */}
        <View className='ResumePart'>
        <Text className='intro'>期望职位</Text>
              <View className='at-row'>
                <View className='at-col at-col-3 hopePositionTitle'>地区</View>
                <View className='at-col at-col-3 hopePositionTitle'>职位类别</View>
                <View className='at-col at-col-6 hopePositionTitle'>薪资范围(千元/月)</View>
              </View>

                <View>
                  <positionText.Provider value={{setExpectedPosition}}>
                                     {//展示初始数据
                expectPosition?
                expectPosition.map((Info,index)=>(<View key={index} >
                <ExpectPosition  Info={Info}  changeItem={handleExpectChange(index)} area={areaSelector} type={positionTypeSelector} />

                <View className='at-row'>

                  {/* 调整格式 */}
                  <View className='at-col at-col-10'></View>

                  <View className='at-col' onClick={()=>{deleteExpectPosition(index)}}>
                  <AtIcon value='close-circle' size='20' color='#000'  ></AtIcon>
                  <View style={{display:'inline'}}>删除</View>

                  </View>
                </View>

                </View>
                ))
                :null} 
                </positionText.Provider>
                </View>

                <View onClick={addExpectPosition}>
                  <AtIcon value='add-circle' size='20' color='#000' />
                    添加
                </View>
        </View>

{/* 工作经历 */}
        <View className='ResumePart'>
        <Text className='intro'>工作经历</Text>
            <workExpText.Provider value={{setWorkExp}}>
                    {
                      workExp?
                      workExp.map((Info,index)=>(
                          <View  key={index}>
                            <WorkExp Info={Info} changeExpItem={handleWorkChange(index)} index={index} />

                            <View className='at-row'>

                            {/* 调整格式 */}
                            <View className='at-col at-col-10'></View>

                            <View className='at-col' onClick={()=>{deleteWorkExp(index)}}>
                            <AtIcon value='close-circle' size='20' color='#000'  ></AtIcon>
                            <View style={{display:'inline'}}>删除</View>

                            </View>
                            </View>
                        </View>))
                      :null
                    }
            </workExpText.Provider>

            
            
            <View onClick={addWorkExp}>
                  <AtIcon value='add-circle' size='20' color='#000' />
                    添加
                </View>
        </View>


{/* 教育背景 */}
        <View className='ResumePart'>
        <Text className='intro'>教育背景</Text>
            <EduBackText.Provider value={{setEduBack}}>
                    {
                      eduBack?
                      eduBack.map((Info,index)=>(<View key={index}>
                        <EduBack  Info={Info} changeEduItem={handleEduChange(index)} index={index} />

                        <View className='at-row'>

                                {/* 调整格式 */}
                                <View className='at-col at-col-10'></View>

                                <View className='at-col' onClick={()=>{deleteEduBack(index)}}>
                                <AtIcon value='close-circle' size='20' color='#000'  ></AtIcon>
                                <View style={{display:'inline'}}>删除</View>

                                </View>
                                </View>
                      </View>))
                      :null
                    }
            </EduBackText.Provider>
            
            <View onClick={addEduBack}>
                  <AtIcon value='add-circle' size='20' color='#000' />
                    添加
                </View>
        </View>
      
      <View>
      <Text className='intro'>证书</Text>

{/* 获奖证书 */}
        <View>
        <Text >获奖证书:</Text>
        <honorText.Provider value={{setHonorCertificate}}>
                    {
                      honorCertificate?
                      honorCertificate.map((Info,index)=>(<View key={index}>
                        <HonorCertificate  Info={Info}  changeHonorItem={handleHonorChange(index)} imgConvertBase64={imgConvertBase64}  />
                       

{/* 刪除按鈕*/}
                        <View className='at-row'>
                              {/* 调整格式 */}
                              <View className='at-col at-col-10'></View>
                              <View className='at-col' onClick={()=>{deleteHonorCertificate(index)}}>
                              <AtIcon value='close-circle' size='20' color='#000'  ></AtIcon>
                              <View style={{display:'inline'}}>删除</View>

                              </View>
                              </View>
                     
                      </View>))
                      :null
                    }
            </honorText.Provider>
            
{/* 新增荣誉证书 */}
            {
                      newHonorCertificate?
                      newHonorCertificate.map((Info,index)=>(<HonorCertificatePost key={index} Info={Info} changeNewHonorItem={handleNewHonorChange(index)} />))
                      :null
                    }
            <View onClick={addHonor}>
                  <AtIcon value='add-circle' size='20' color='#000' />
                    添加
                </View>
        </View>
      
{/* 职业技能证书 */}
        <View>
        <Text>职业技能证书:</Text>
        <skillText.Provider value={{setSkillCertificate}}>
                    {
                      skillCertificate?
                      skillCertificate.map((Info,index)=>(<View key={index}>
                        <SkillCertificate  Info={Info} changeSkillItem={handleSkillChange(index)} imgConvertBase64={imgConvertBase64}  />
                      
                        <View className='at-row'>

                            {/* 调整格式 */}
                            <View className='at-col at-col-10'></View>

                            <View className='at-col' onClick={()=>{deleteSkillCertificate(index)}}>
                            <AtIcon value='close-circle' size='20' color='#000'  ></AtIcon>
                            <View style={{display:'inline'}}>删除</View>

                            </View>
                            </View>

                      </View>))
                      :null
                    }
            </skillText.Provider>


            {
                      newSkillCertificate?
                      newSkillCertificate.map((Info,index)=>(<SkillCertificatePost key={index} Info={Info} changeNewSkillItem={handleNewSkillChange(index)} />))
                      :null
                    }
            <View onClick={addSkill}>             
                  <AtIcon value='add-circle' size='20' color='#000' />
                    添加
                </View>
        </View>
      </View>
      
      
      <View className='resumeButton'>
      <AtButton
        className='myResumeSubmit'
        type='primary'
        onClick={onSubmit}
      >
        提交
        </AtButton>
      </View>

    </AtForm>

    
        
    </View>
  </View>
  )
 
}